
<html lang="ch-zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue.js"></script>
    <script src="./js/element.js"></script>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="./js/element.css">

    <style>
        .container_div {
            display: flex;
            flex-direction: column;
        }

        label {
            position: relative;
        }

        #file {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        #btn {
            margin-right: 5px;
        }

        #text {
            color: red;
        }

        #btn {
            padding: 5px 10px;
            background: #00b0f0;
            color: #FFF;
            border: none;
            border-radius: 5px;
        }

        div.is-horizontal {
            flex-basis: 300px !important;
        }

        .choosemodel{
            position: relative;
            top: 50px;
        }
    </style>
    <title>Document</title>
</head>
<body>
<div id="app" class="container_div" v-loading="loading" style='width:700px' element-loading-text="正在处理，请稍后...">
    <el-steps :space="100" :active="active" finish-status="success" style="margin-bottom:30px">
        <el-step title="1.选取文件夹"></el-step>
        <el-step title="2.上传备案文件"></el-step>
        <el-step title="3.核查文件完整性"></el-step>
        <el-step title="4.开始计算"></el-step>
        <el-step title="5.报告模板下载"></el-step>
    </el-steps>
    <el-select v-show='active == 1' @change="getpath" v-model="selectPath" style="width:300px">
        <el-option v-for='item in list'
                   :label="item.value"
                   :value="item.value">
        </el-option>
    </el-select>

    <label for="file" v-show='active == 2'>
        <input type="button" id="btn" value="点我上传"><span id="text">{{text}}</span>
        <input type="file" id="file" @change="uploadfile">
    </label>

    <el-button @click="check" v-if='active == 3' style="width: 150px" :disabled='disabled3'>核查</el-button>
    <el-button @click="start" v-if='active == 4' style="width: 150px" :disabled='disabled2'>开始计算</el-button>
    <el-button v-if='active == 6' style="width:150px" @click="down" :disabled='disabled4'>下载</el-button>
    <el-button v-if='active == 5' @click="download"  style="width:150px;" type="primary">下载模板</el-button>
    <div style="padding-top:20px">
        <el-button v-if='active == 5' style="width:150px" @click="refresh">返回第一步</el-button>
    </div>
    <div style="padding-top:20px">
        <el-button @click="add" style="width:150px" type="primary" :disabled="disabled" v-if="active!=5">下一步</el-button>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            active: 1,
            list: [{
                value: '选项1',
                label: '黄金糕'
            }],
//           time:'',
            disabled: true,
            disabled3: false,
            selectPath: '',
            action: '',
            loading: false,
            text: '请上传备案文件',
            disabled2: false,
            disabled4:false,
            // url: 'http://10.51.14.242:8096'
            url: 'http://10.51.14.46:8096'
            //url: 'http://localhost:8096'
        },
        created() {
            this.getlist();
        },
        mounted() {
            this.getlist();
        },
        methods: {
            refresh: function () {
                window.location.reload()
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
                this.disabled = false
            },
            getpath(event) {
             // this.selectPath=this.selectPath.replace(/\\/g, '/')
//               console.log("选择的地址",this.selectPath)
                this.action = this.url + '/etl/uploadBack?dirPath=' + this.selectPath
                this.disabled = false
            },
            getlist() {
                that = this
                $.ajax({
                    url: that.url + '/etl/getFileList',
                    type: 'GET',
                    data: {
                        dir: 'F:\\zhgl\\zhibao'
                        // dir: 'D:\\Result\\test'
                        //dir: 'C:\\zhgl\\zhibao'
                    },
                    success: function (res) {
                        if (res) {
                            that.list = [];
                            for (var index in res.data) {
                                var item = res.data[index]
                                item = item.replace(/\\/g, '/')
                                that.list.push({
                                    name: 'path',
                                    value: item
                                });
                            }
                        } else {

                        }
                    }
                })
            },
            add(){
//                if(this.active !==5){
                this.active += 1
//                }else{
//                  this.active =1
//                }
                this.disabled = true
            },
            download(){
                var url = this.url + '/word/download?dir=' + this.selectPath;
                location.href = url
            },
            start() {
                this.loading = true
                this.disabled2 = true
                this.disabled4 = false
                var that = this
                $.ajax({
                    url: that.url + '/etl/start',
                    type: 'GET',
//          dataType: 'JSONP',
                    data: {
                        dir: this.selectPath
                    },
                    success: function (res) {
                        if (res.code == '200') {
                            setTimeout(function () {
                                that.loading = false
                                console.log('22222222222')
                                that.disabled = false
                                that.disabled2 = true
                                that.down();
                            }, 60 * 1000)
                        } else {
                            this.message({
                                type: 'error',
                                message: res.msg
                            })
                            that.loading = false
                            that.disabled = false
                            that.disabled2 = false
                            console.log(1111111)
                        }
                    }
                })
            },
            down() {
                var url = this.url + '/etl/downLoad?dir=' + this.selectPath;
                location.href = url
            },
            uploadfile() {
                this.disabled = false
                that = this
                var file = document.querySelector("#file").files[0]
                var data = new FormData()
                data.append('file', file)
                data.append('dirPath', this.selectPath)
                $.ajax({
                    url: that.url + '/etl/uploadBack',
                    type: 'post',
//              dataType: 'JSONP',
                    processData: false,  // 不处理数据
                    contentType: false,   // 不设置内容类型
                    data: data,
                    success: function (res) {
                        if (res.code == '200') {
                            that.disabled = false
                            that.text = '已上传备案文件'
                            that.$message({
                                type: 'success',
                                message: res.msg
                            })
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.msg
                            })
                            that.text = '请上传备案文件'
                            that.disabled = true
                            document.querySelector("#file").value = ''
                            document.querySelector("#file").files = []
                        }
                    }
                })
            },
            check() {
                that = this
                that.loading = true
                that.disabled = false;
                $.ajax({
                    url: that.url + '/etl/check',
                    type: 'get',
//              dataType: 'JSONP',
//        processData: false,  // 不处理数据
//        contentType: false,   // 不设置内容类型
                    data: {
                        dir: this.selectPath
                    },
                    success: function (res) {
                        if (res.code == '200') {
                            setTimeout(function () {
                                that.loading = false
                                that.disabled3 = true
                                that.$message({
                                    type: 'success',
                                    message: res.msg
                                })
                            }, 10 * 1000)
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.msg
                            });
                            that.disabled = true
                        }
                    }
                })
            }
        }
    });
</script>
</body>
</html>
